<template>
  <view class="container">
    <!-- 背景图片 -->
    <image class="bg-image" src="/static/bg.jpg" mode="aspectFill"></image>
    <!-- 自定义顶部栏 -->
    <view class="custom-navbar">
      <view class="navbar-title">四级真题</view>
      <view class="navbar-right"></view>
    </view>

    <!-- 试卷列表 -->
    <view class="card glass-effect">
      <view class="exam-tabs">
        <view
          v-for="(tab, idx) in examTabs"
          :key="tab.value"
          :class="['exam-tab', {active: selectedTab === tab.value}]"
          @tap="selectedTab = tab.value"
        >
          {{ tab.label }}
          <view v-if="selectedTab === tab.value" class="tab-underline"></view>
        </view>
      </view>
      <view class="exam-list">
        <view
          v-for="(paper, idx) in getCurrentPapers"
          :key="paper.id"
          class="exam-item"
          @tap="onPaperSelect(paper)"
        >
          <view class="paper-info">
            <view class="paper-name">{{ paper.name }}</view>
            <view class="paper-meta">
              <text class="paper-date">{{ paper.date }}</text>
              <text class="paper-duration">时长：{{ paper.duration }}</text>
            </view>
          </view>
          <button class="start-btn">开始答题</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      examTabs: [
        { label: '最新真题', value: 'latest' },
        { label: '历年真题', value: 'history' },
        { label: '模拟试题', value: 'mock' }
      ],
      selectedTab: 'latest',
      papers: {
        latest: [
          {
            id: 'cet4-202412-1',
            name: '2024年12月大学英语四级真题卷一',
            date: '2024-12',
            duration: '130分钟'
          },
          {
            id: 'cet4-202412-2',
            name: '2024年12月大学英语四级真题卷二',
            date: '2024-12',
            duration: '130分钟'
          }
        ],
        history: [
          {
            id: 'cet4-202406-1',
            name: '2024年6月大学英语四级真题卷一',
            date: '2024-06',
            duration: '130分钟'
          },
          {
            id: 'cet4-202406-2',
            name: '2024年6月大学英语四级真题卷二',
            date: '2024-06',
            duration: '130分钟'
          }
        ],
        mock: [
          {
            id: 'cet4-mock-1',
            name: '四级模拟试题一',
            date: '2024-03',
            duration: '130分钟'
          },
          {
            id: 'cet4-mock-2',
            name: '四级模拟试题二',
            date: '2024-03',
            duration: '130分钟'
          }
        ]
      }
    }
  },
  computed: {
    getCurrentPapers() {
      return this.papers[this.selectedTab] || []
    }
  },
  methods: {
    onPaperSelect(paper) {
      uni.navigateTo({
        url: `/pages/exam/cet4/paper?id=${paper.id}`
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  padding: 32rpx 20rpx 20rpx 20rpx;
  min-height: 100vh;
  position: relative;
  background: transparent;
}

.bg-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.custom-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 24rpx;
  background: transparent;
  padding-top: calc(env(safe-area-inset-top) + 50px);
  box-sizing: border-box;
  margin-bottom: 60rpx;
}

.navbar-title {
  flex: 1;
  text-align: center;
  font-size: 32rpx;
  color: #222;
  font-weight: bold;
  margin-left: 48rpx;
}

.card {
  border-radius: 32rpx;
  margin-bottom: 32rpx;
  padding: 32rpx 24rpx 24rpx 24rpx;
  box-shadow: 0 4rpx 24rpx 0 rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.5);
  position: relative;
}

.glass-effect {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.exam-tabs {
  display: flex;
  border-bottom: 1px solid #eaeaea;
  margin-bottom: 12rpx;
}

.exam-tab {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
  color: #283b66;
  padding: 18rpx 0 12rpx 0;
  position: relative;
  background: transparent;
}

.exam-tab.active {
  font-weight: bold;
  color: #283b66;
}

.tab-underline {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 48rpx;
  height: 6rpx;
  background: #283b66;
  border-radius: 3rpx;
}

.exam-list {
  margin-top: 8rpx;
}

.exam-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 0;
  border-bottom: 1px solid #f0f0f0;
}

.exam-item:last-child {
  border-bottom: none;
}

.paper-info {
  flex: 1;
  margin-right: 24rpx;
}

.paper-name {
  font-size: 28rpx;
  color: #222;
  margin-bottom: 8rpx;
}

.paper-meta {
  display: flex;
  gap: 16rpx;
  font-size: 24rpx;
  color: #666;
}

.start-btn {
  background: #283b66;
  color: #fff;
  font-size: 26rpx;
  padding: 0 32rpx;
  height: 64rpx;
  line-height: 64rpx;
  border-radius: 32rpx;
  border: none;
}
</style> 